<template>
    <div id='shopcar_box'  >
        <div class='location lc' >
          <div class='cc'>
            <div class='ca'>
              <div class='current_adress' v-for='ff in position' :key='ff.id+ff.index'>
                <span class='current_position'>{{ff.position}}</span>
              </div>
            </div>
          </div>  
            <div class='goods_list' v-for='lists in shopcar' :key='lists.id+lists.index'>
                <p class='location'>{{lists.shopname}}-{{lists.location}}</p>
                <li v-for='lists in lists.img' :key='lists.id' class='listimg'>
                    <img :src='lists.imgsrc' alt=''>
                    <p>￥{{lists.price}}</p>
                </li>
            </div>
        </div>
        <div class='other_adress'>
          <div class='cc'> 
           <div class='ca2'>
            <div class='old_adress'>
                <span class='old_position'>其他地址</span>
            </div>
           </div>
          </div>
             <div class='goods_list' v-for='dd in oldPosition' :key='dd.id'>
                <p class='location'>{{dd.shopname}}-{{dd.location}}</p>
                <li v-for='dd in dd.img' :key='dd.id' class='listimg'>
                    <img :src='dd.imgsrc' alt=''>
                    <p>￥{{dd.price}}</p>
                </li>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            shopcar:[],
            position:[],
            oldPosition:[]
        };
    },
    created(){
        this.shopCar();
        this.shopOldPosition();
        this.shopPosition()
    },
    methods:{
        shopCar(){
            this.$jq.get(this.apiurl+"/shop/shopcar").done(result=>{
                this.shopcar=result.data
            })
        },
        shopPosition(){
            this.$jq.get(this.apiurl+"/shop/shopcar").done(result=>{
                this.position=result.data3
            })
        },
         shopOldPosition(){
            this.$jq.get(this.apiurl+"/shop/shopcar").done(result=>{
                this.oldPosition=result.data2
            })
        },
    }
}
</script>
<style scoped>
/* 格式化信息 */
body{
    background-color: #f4f4f4;
    font-size: normal;
    font-weight: normal
}
p{
    margin:0;
    padding:0
}
/* 地址栏 */
#shop_box{
    width:100%
}
.location,.old_position{
    font-size: 0.94rem;
    color:#333;
    line-height: 1rem;
}
.location{
    width:96%;
    margin:auto;
    padding-top:1rem;
}
.lc{
    padding-top:0
}
.cc{
    width:100%;
    text-align: center;
    margin:0.975rem 0 0.625rem;
}
.ca{
    border-radius: 2rem;
    background: #d1e7d3;
    display: inline-block;
    margin:auto;
    padding:0.38rem 0.44rem;
    text-align: center
}
.current_adress,.old_adress{
    background:#47b34f url(/static/loc2.png) 0.81rem center no-repeat;
    font-size: 0.875rem;
    color:#fff;
    background-size:0.8rem 1rem;
    border-radius:1.375rem;
    display: inline-block;
    padding:0rem 1rem;
}
.current_position,.old_position{
    margin-left: 1rem;
    line-height: 1.5rem;
}
/* 商品信息 */
.goods_list{
    background:#fff url(/static/gc.png)  center no-repeat;
    display: flex;
    justify-content:flex-start;
    flex-wrap: wrap;
    background-size: cover;
    margin-bottom: 1rem;
}
.listimg{
    width:18%;
    margin: 1rem 0;
    padding-top:1.5rem;
}
.listimg>img{
    width:100%;
}
.listimg>p{
    text-align: center;
}
.old_position{
     background:#999;
     color:#fff;
}
.old_adress{
    background:#999 url(/static/loc2.png) 0.81rem center no-repeat;
    background-size:0.8rem 1rem;
}
.ca2{
    border-radius: 2rem;
    background: #e2e2e2;
    display: inline-block;
    margin:auto;
    padding:0.38rem 0.44rem;
    text-align: center
}
</style>


